<template>
    <div id="rules">
        <!--工具条-->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
            <el-form :inline="true" :model="filters">
                <el-form-item>
                    <el-input v-model="filters.username" placeholder="登录名"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="filters.nickName" placeholder="昵称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="filters.phone" placeholder="手机"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" v-on:click="queryData">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleAdd">新增</el-button>
                </el-form-item>
            </el-form>
        </el-col>

        <!--列表-->
        <el-table :data="list" highlight-current-row v-loading="listLoading" style="width: 100%;">
            <el-table-column type="index" width="60"></el-table-column>
            <el-table-column prop="username" label="登录名" sortable></el-table-column>
            <el-table-column prop="nickName" label="昵称" sortable></el-table-column>
            <el-table-column prop="phone" label="手机" sortable></el-table-column>
            <el-table-column prop="points" label="积分" sortable></el-table-column>
            <el-table-column label="操作" width="120">
                <template slot-scope="scope">
                    <el-button type="primary" size="small" icon="edit"
                               @click="handleEdit(scope.$index, scope.row)"></el-button>
                    <el-button type="danger" size="small" icon="delete"
                               @click="handleDel(scope.$index, scope.row)"></el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--工具条-->
        <el-col :span="24" class="toolbar">
            <el-pagination layout="prev, pager, next" @current-change="handleCurrentPageChange"
                           :page-size="pagination.size"
                           :total="pagination.total" style="float:right;"></el-pagination>
        </el-col>

        <!--新增界面-->
        <el-dialog title="新增" v-model="addFormVisible" :close-on-click-modal="false">
            <el-form :model="addForm" label-width="80px" :rules="formRules" ref="addForm">
                <el-form-item label="登录名" prop="username">
                    <el-input v-model="addForm.username" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="昵称" prop="nickName">
                    <el-input v-model="addForm.nickName" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="手机" prop="phone">
                    <el-input v-model="addForm.phone" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="addForm.password" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="角色" prop="role.id">
                    <el-select v-model="addForm.role.id" placeholder="请选择">
                        <el-option
                                v-for="item in roleOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="addFormVisible = false">取消</el-button>
                <el-button type="primary" @click="addSubmit('addForm')" :loading="addLoading">提交</el-button>
            </div>
        </el-dialog>

        <!--编辑界面-->
        <el-dialog title="编辑" v-model="editFormVisible" :close-on-click-modal="false">
            <el-form :model="editForm" label-width="80px" :rules="formRules" ref="editForm">
                <el-form-item label="登录名" prop="username">
                    <el-input v-model="editForm.username" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="昵称" prop="nickName">
                    <el-input v-model="editForm.nickName" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="手机" prop="phone">
                    <el-input v-model="editForm.phone" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="editForm.password" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="角色" prop="role.id">
                    <el-select v-model="editForm.role.id" placeholder="请选择">
                        <el-option
                                v-for="item in roleOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="editFormVisible = false">取消</el-button>
                <el-button type="primary" @click="editSubmit('editForm')" :loading="editLoading">提交</el-button>
            </div>
        </el-dialog>
    </div>
</template>


<script>
    import util from '../../common/js/util';
    import {
        roleList,
        userList,
        userDel,
        userSave
    } from "../../api/api";

    export default {
        data() {
            return {
                filters: {
                    phone: '',
                    username: '',
                    nickName: ''
                },
                pagination: {
                    total: 0,
                    page: 1,
                    size: 20
                },

                listLoading: false,
                list: [],
                roleOptions: [],

                addLoading: false,
                addFormVisible: false,
                addForm: {
                    username: '',
                    nickName: '',
                    phone: '',
                    password: '',
                    role: {
                        id: ''
                    }
                },
                editLoading: false,
                editFormVisible: false,
                editForm: {
                    username: '',
                    nickName: '',
                    phone: '',
                    password: '',
                    role: {
                        id: ''
                    }
                },
                formRules: {
                    username: [
                        {required: true, message: "请输入登录名", trigger: "blur"},
                        {max: 20, message: '长度最大20', trigger: 'blur'}
                    ],
                    nickName: [
                        {required: true, message: "请输入昵称", trigger: "blur"},
                        {max: 20, message: '长度最大20', trigger: 'blur'}
                    ],
                    phone: [
                        {required: true, message: "请输入手机号码", trigger: "blur"},
                        {len: 11, message: '长度必须为11', trigger: 'blur'}
                    ],
                    passwrod: [
                        {required: true, message: "请输入登录密码", trigger: "blur"},
                        {min: 4, max:20, message: '长度必须大于4小于20', trigger: 'blur'}
                    ],
                    'role.id': [
                        {required: true, message: '请选择角色', trigger: 'change'}
                    ]
                }
            }
        },
        mounted() {
            this.initRoles();
            this.queryData();
        },
        methods: {
            initRoles: function () {
                let _this = this;
                let para = {
                    page: 1,
                    size: 1000
                };
                roleList(para).then(res => {
                    let roles = res.data.content || [];
                    for (let i = 0; i < roles.length; i++) {
                        _this.roleOptions.push({
                            label: roles[i].name,
                            value: roles[i].id + ""
                        });
                    }
                });
            },
            queryData: function () {
                let _this = this;
                let para = {
                    page: _this.pagination.page,
                    size: _this.pagination.size,
                    data: {
                        phone: _this.filters.phone,
                        username: _this.filters.username,
                        nickName: _this.filters.nickName
                    }
                };
                this.listLoading = true;
                userList(para).then(res => {
                    _this.pagination.total = res.data.totalElements || 0;
                    _this.list = res.data.content || [];
                    _this.listLoading = false;
                });
            },
            handleCurrentPageChange: function (val) {
                this.pagination.page = val;
                this.queryData();
            },
            handleAdd: function () {
                this.addFormVisible = true;
                this.addForm = {
                    phone: "",
                    username: "",
                    nickName: "",
                    role: {
                        id: ''
                    }
                };
            },
            addSubmit: function (formName) {
                let _this = this;
                let para = _this.addForm;

                _this.$refs[formName].validate((valid) => {
                    if (valid) {
                        _this.$confirm('确认提交吗？', '提示', {}).then(() => {
                            this.addLoading = true;
                            userSave(para).then(res => {

                                _this.addLoading = false;
                                _this.addFormVisible = false;
                                if (res.code === 20000) {
                                    _this.$message({message: res.message, type: 'success'});
                                    _this.queryData();
                                } else {
                                    _this.$message({message: res.message, type: 'warning'});
                                }
                            })
                        })
                    } else {
                        console.log('error')
                        return false;
                    }
                })
            },
            handleEdit: function (index, row) {
                this.editFormVisible = true;
                this.editForm = Object.assign({}, row);
                if (row.role.id == 1) {
                	this.editForm.role.id = '管理员';
                } else if(row.role.id == 2) {
                	this.editForm.role.id = '普通用户';
                };
            },
            editSubmit: function (formName) {

                let _this = this;
                let para = _this.editForm;
                if (this.editForm.role.id = '管理员') {
                	para.role.id = '1';
                } else if(this.editForm.role.id = '普通用户') {
                	para.role.id = '2';
                };
                _this.$refs[formName].validate((valid) => {
                    if (valid) {
                        _this.$confirm('确认提交吗？', '提示', {}).then(() => {
                            this.editLoading = true;
                            userSave(para).then(res => {

                                _this.editLoading = false;
                                _this.editFormVisible = false;
                                if (res.code === 20000) {
                                    _this.$message({message: res.message, type: 'success'});
                                    _this.queryData();
                                } else {
                                    _this.$message({message: res.message, type: 'warning'});
                                }
                            })
                        })
                    } else {
                        return false;
                    }
                })

            },
            handleDel: function (index, row) {

                let _this = this;
                _this.$confirm('确认删除吗？', '提示', {}).then(() => {
                    userDel({id: row.id}).then(res => {
                        if (res.code === 20000) {
                            _this.$message({message: res.message, type: 'success'});
                            _this.queryData();
                        } else {
                            _this.$message({message: res.message, type: 'warning'});
                        }
                    })
                })
            }
        }
    }
</script>
